<template>
  <div class="mine-page">
    <div class="mine-header">
      <div class="mh-bg"></div>
      <div class="mh-cont">
        <div class="mh-img">
          <div :style="{'background-image': 'url(/static/images/boy.png)'}" class="img" v-if="userData.sex == 1"></div>
          <div :style="{'background-image': 'url(/static/images/girl.png)'}" class="img" v-else-if="userData.sex == 0"></div>
          <div class="mh-name">{{userData.name}}</div>
        </div>
        <ul class="mh-info">
          <li>
            <img src="@/assets/images/mine_school.png" class="m-icon i-school">
            <span class="school-name" :class="[{'ln2': userData && userData.school && userData.school.length > 8}]">{{userData.school}}</span>
          </li>
          <li>
            <img src="@/assets/images/mine_book.png" class="m-icon i-book">
            <span>{{userData.studentClass == 1 ? '高一' : userData.studentClass == 2 ? '高二' : '高三'}}</span>
          </li>
          <li>
            <img src="@/assets/images/mine_addr.png" class="m-icon i-addr">
            <span>{{userData.city}}</span>
          </li>
        </ul>
      </div>
    </div>

    <group class="mine-group">
      <cell title="姓名" :value="userData.name"></cell>
      <!-- <cell title="选考科目" :value="chooseSubject"></cell> -->
      <!-- <cell title="手机号码" :value="userData.phone"></cell> -->
      <cell title="个人信息" link="/mine/userinfo"></cell>
      <cell title="成绩和位次号" link="/mine/rank"></cell>
      <cell title="我的订单" link="/order"></cell>
      <cell title="退出登录" @click.native="signOut()"></cell>
    </group>

    <div class="btn-group txt-center">
      <a href="javascript:;" class="btn btn-vip" @click="becomeVip()" v-if="canBuyVip"></a>
      <!-- <a href="javascript:;" class="btn btn-woo" @click="applyWooCard()" v-if="canBuyWooCard"></a> -->
    </div>
  </div>
</template>

<script>
import Api from '@/api/index.js'
import Utils from '@/common/utils.js'
import { Cell, Group, Confirm } from 'vux'
export default {
  components: {
    Cell,
    Group
  },
  data() {
    return {
      userData: {},
      chooseSubject: null,
      canBuyVip: false,
      canBuyWooCard: false
    }
  },
  created() {
    this.getUserData()
  },
  methods: {
    // 退出登录
    signOut() {

      this.$vux.confirm.show({
        title: '提示',
        content: '确认要退出吗！',
        onCancel: null,
        onConfirm: () => {
          localStorage.removeItem('userData');
          localStorage.removeItem('accesstoken');
          this.$router.push({ name: 'home' })
        }
      })

      // TODO 这里还需要调用一个清空服务端退出的接口
    },
    // 获取用户信息
    getUserData() {
      let that = this
      Api.getUserInfo().then(res => {
        Utils.local('userData', res.data)
        that.userData = res.data
        if (res.data.name) {
          Api.checkNingBoUser().then(check => {
            if (check.code == 20000) {
              if (check.message == 0) {
                this.$vux.alert.show({
                  content: `您的手机号码非联通号码，需购买vip套餐`,
                  buttonText: '确定',
                  maskZIndex: 100,
                  onHide() {
                    that.$router.push({ name: 'goodsPay' });
                  }
                })
              }
            }
          });
        }

        that.canBuyVip = true;
        // that.canBuyVip = that.userData && !that.userData.isCommonPay
        that.canBuyWooCard = that.userData && !that.userData.isCommonPay
      })
    },
    // 成为vip
    becomeVip() {
      this.$router.push({ name: 'goodsPay' })
    },
    // 申请woo卡
    applyWooCard() {
      this.$router.push({ name: 'goodsPay', query: { t: 'woo' } })
    }
  }
}
</script>

<style lang="scss">
.mine-group {
  .weui-cells {
    margin-top: 0 !important;
  }
  .weui-cell {
    font-size: 15px;
  }
}
</style>

<style lang="scss" scoped>
.mine-header {
  height: 5.026667rem /* 188.5/37.5 */;
  .mh-bg {
    height: 3.12rem /* 117/37.5 */;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, #ffa440 0%, #ff8600 100%);
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;
  }
  .mh-cont {
    width: 8.24rem /* 309/37.5 */;
    height: 4.186667rem /* 157/37.5 */;
    background-image: url("../../assets/images/mine_bg.png");
    background-size: cover;
    position: absolute;
    top: 0.533333rem /* 20/37.5 */;
    left: calc((100% - 8.24rem) / 2);
  }
  .mh-img {
    text-align: center;
    color: #fff;
    font-size: 18px;
    padding-top: 0.266667rem /* 10/37.5 */;
    .img {
      width: 1.786667rem /* 67/37.5 */;
      height: 1.786667rem /* 67/37.5 */;
      border-radius: 50%;
      background-position: top center;
      background-size: cover;
      margin: 0 auto;
      border: 1px solid #ff8600;
    }
    .mh-name {
      font-weight: 400;
      margin-top: 0.266667rem /* 10/37.5 */;
      font-size: 16px;
      color: #333;
    }
  }
  .mh-info {
    position: relative;
    width: 100%;
    margin-top: 0.4rem /* 15/37.5 */;
    li {
      position: absolute;
      &:nth-child(1) {
        left: 0.666667rem /* 25/37.5 */;
        width: 3.2rem /* 120/37.5 */;
        padding-left: 0.48rem /* 18/37.5 */;
      }
      &:nth-child(2) {
        left: 4rem /* 150/37.5 */;
      }
      &:nth-child(3) {
        left: 6.213333rem /* 233/37.5 */;
      }
      span {
        color: #999;
      }
      .m-icon {
        vertical-align: text-bottom;
        &.i-school {
          width: 0.386667rem /* 14.5/37.5 */;
          height: 0.4rem /* 15/37.5 */;
          position: absolute;
          left: 0;
        }
        &.i-book {
          width: 0.293333rem /* 11/37.5 */;
          height: 0.333333rem /* 12.5/37.5 */;
        }
        &.i-addr {
          width: 0.24rem /* 9/37.5 */;
          height: 0.346667rem /* 13/37.5 */;
        }
      }
      .school-name {
        line-height: 0.426667rem /* 16/37.5 */;
        &.ln2 {
          position: absolute;
          margin-top: -0.133333rem /* 5/37.5 */;
          line-height: 0.373333rem /* 14/37.5 */;
        }
      }
    }
  }
}
.btn-group {
  margin-top: 0.533333rem /* 20/37.5 */;
  .btn {
    width: 6.573333rem /* 246.5/37.5 */;
    height: 1.266667rem /* 47.5/37.5 */;
    display: block;
    background-size: contain;
    margin: 0.533333rem auto /* 20/37.5 */;
    background-repeat: no-repeat;
  }
  .btn-vip {
    background-image: url("../../assets/images/btn_vip1.png");
  }
  .btn-woo {
    background-image: url("../../assets/images/reg_woocard.png");
    margin-left: 70px;
  }
}
</style>
